
import React from 'react';
import {
    Image
} from 'react-native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { AntDesign, FontAwesome5, MaterialCommunityIcons } from '@expo/vector-icons';
import './Phone';
import Home from '../pages/Home';
import Sort from '../pages/Sort';
import Community from '../pages/Community';
import User from '../pages/User';

const Tab = createBottomTabNavigator();

const Tabbar = () => {
    return (
        <Tab.Navigator
            screenOptions={{
                headerShown: false,
                tabBarInactiveTintColor: '#666666',
                tabBarActiveTintColor: 'lightblue',
                tabBarStyle: {
                    height: h*0.06,
                    backgroundColor: 'white'
                }
            }}
        >
            <Tab.Screen 
                name='Home'
                component={Home}
                options={{
                    title: '首页',
                    tabBarIcon: ({color,size})=>(
                        <AntDesign 
                            name='home' 
                            color={color} 
                            size={size}
                        />
                    ),
                    headerShown: true,
                    headerTitle: ()=>{
                        return <Image 
                            source={require('../assets/logo.png')}
                            style={{width:159/2, height:81/2}}
                        />
                    },
                    headerTitleAlign: 'center',
                    headerStyle: {
                        height: h*0.1,
                        backgroundColor: 'white',
                    }
                }}
            />
            <Tab.Screen 
                name='Sort'
                component={Sort}
                options={{
                    title: '分类',
                    tabBarIcon: ({color,size})=>(
                        <AntDesign name="eyeo" size={size} color={color} />
                    )
                }}
            />
            <Tab.Screen 
                name='Community'
                component={Community}
                options={{
                    title: '社区',
                    tabBarIcon: ({color,size})=>(
                        <MaterialCommunityIcons 
                            name='comment-plus-outline' 
                            color={color} 
                            size={size}
                        />
                    )
                }}
            />
            <Tab.Screen 
                name='User'
                component={User}
                options={{
                    title: '我的',
                    tabBarIcon: ({color,size})=>(
                        <AntDesign 
                            name='user' 
                            color={color} 
                            size={size}
                        />
                    )
                }}
            />
        </Tab.Navigator>
    )
}

export default Tabbar
